<template>
  <div class="search-criteria">
    <BasicSearchCriteria :api="getCollectLogDetailedList" :form-data="formData" :format-form-data="formatFormData">
      <!-- 采集时间
      <a-form-item label="采集时间" name="collectData">
        <a-range-picker v-model:value="formData.collectData" format="YYYY/MM/DD" />
      </a-form-item>-->

      <!-- 站点分类 -->
      <a-form-item name="siteClassification" class="select-item">
        <!-- <BindingClassificationSelect v-model:newValue="formData.siteClassification" /> -->
        <!--
          <SiteClassificationSelect
          ref="siteClassificationSelect"
          v-model:value="formData.siteClassificationSelectIds"
          @change="siteClassificationSelectChange"
        />
         -->
        <a-cascader
          v-model:value="formData.classData"
          change-on-select
          :options="SOURCE_DATA"
          :field-names="{ label: 'category', value: 'category', children: 'sub_category' }"
          placeholder="全部分类"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          @change="handleChange"
        >
          <template #suffixIcon>
            <a-tooltip placement="top" color="#fff">
              <template #title> 双击选中父级 </template>
              <div class="ellipsis-text">
                <question-circle-outlined />
              </div>
            </a-tooltip>
          </template>
        </a-cascader>
      </a-form-item>

      <!-- 采集状态 -->
      <!-- <a-form-item name="collectState" class="select-item">
        <a-select v-model:value="formData.collectState" :options="COLLECT_START_STATE_3"> </a-select>
      </a-form-item> -->

      <!-- 影片名称 -->
      <a-form-item name="resource_name" class="input-item">
        <a-input v-model:value.trim="formData.resource_name" placeholder="请输入影片名称关键词"> </a-input>
      </a-form-item>
    </BasicSearchCriteria>
  </div>
</template>

<script lang="ts" setup name="SearchCriteria">
import BasicSearchCriteria from '../../../../components/BasicSearchCriteria.vue'
import BindingClassificationSelect from '../../../../components/binding-classification/BindingClassificationSelect.vue'
import SiteClassificationSelect from '../../../../components/site-classification-table/components/SiteClassificationCascader.vue'
import { getSiteClassification, SITE_CLASSIFICATION } from '@/stores/modules/collect-manage/select-data-source'
import { ref, reactive, computed, onUnmounted } from 'vue'
import type { SiteClassificationItemType } from '@/stores/modules/collect-manage/select-data-source'
import type { CollectManageRequest } from '@/apis/modules/collectManage'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import apis from '@/apis'
import mitt from '@/utils/mitt'

// api
const { getCollectLogDetailedList, seedCategory } = apis.collectManage

// form
interface FormDataType extends Omit<CollectManageRequest['collectManager.collectLogDetailedList'], 'offset' | 'limit'> {
  // collectData: number[]
  siteClassificationSelectIds: number[]
  classData: string[] | undefined
}

const { id, collect_id, resource_type, content_type, site_id } = useRoute().query
console.log('id: ', id)
const _collect_id = collect_id as string
const _resource_type = Number(resource_type)
const _content_type = Number(content_type)
const _site_id = site_id as string

let formData = reactive<FormDataType>({
  log_id: id as string,
  content_type: _content_type,
  siteClassificationSelectIds: [],
  category: '',
  sub_category: '',
  resource_name: '',
  // collectData: [],
  start_time: null,
  end_time: null,
  classData: undefined
})

let formatFormData = computed(() => {
  return formData
  // const { collectData, ...other } = formData
  // {
  //   ...other,
  // start_time: collectData[0] ? dayjs(collectData[0]).unix() : null,
  // end_time: collectData[1] ? dayjs(collectData[1]).unix() : null
  // }
})

// 获取站点分类数据
// console.log('~~~~~~~~~~~~', _content_type)

// getSiteClassification(_content_type, { site_id: _site_id })

// 设置到formatFormData 中 { category，sub_category }
// const siteClassificationSelect = ref()
// const siteClassificationSelectChange = (value: string[], selectedOptions: SiteClassificationItemType) => {
//   console.log('siteClassificationSelect.value: ', siteClassificationSelect.value)
//   const arrList = siteClassificationSelect.value.findConformingData(value)
//   console.log('arrList: ', arrList)
//   formData.category = arrList[0]?.id ?? ''
//   formData.sub_category = arrList[1]?.id ?? ''
// }
//级联改变事件
const handleChange = (val: any, options: any) => {
  console.log('val: ', val, options)
  formData.category = val[0]
  formData.sub_category = val[1]
}
const SOURCE_DATA = ref()
seedCategory({ collect_id: _collect_id }).then((res: any) => {
  console.log('res种源分类: ', res)
  SOURCE_DATA.value = res?.list ?? []
})
mitt.on('reset-field', () => {
  formData.category = ''
  formData.sub_category = ''
  formData.siteClassificationSelectIds = []
  formData.classData = undefined
})
onUnmounted(() => {
  mitt.off('reset-field')
})
</script>

<style lang="less" scoped>
.search-criteria {
  .ant-form-inline {
    .ant-form-item {
      margin-right: 10px;
    }
    .select-item,
    .input-item {
      width: 196px;
    }
  }
}
</style>
